<template>
     <div style="padding:10px;" id="app">
        <div class="panel panel-primary" style="border-color:gray;">
            
            <div class="panel-heading" style="background-color: gray;border-color: gray;">客户大体信息</div>
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <th  style="    width: 13%;">客户名</th>
                        <th  style="    width: 10%;">身份证号</th>
                        <th  style="    width: 5%;">年龄</th>
                        <th style="    width: 20%;">信誉等级</th>
                        <th  style="    width: 5%;">性别</th> 
                        <th  style="    width: 12%;">电话</th>
                        <th   style="    width: 20%;">家庭地址</th>
                    </tr> 
                </thead>
                <tbody>
                    <template v-for="(row, index) in userInfo ">
                        <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
                        <td>{{row.uname}}</td>
                        <td>{{row.uid}}</td>
                        <td>{{row.age}}</td>
                        <td>
                            <el-rate
                            v-model=row.creditLevel
                            disabled
                            :colors="colors"
                            style="line-height: 45px !important;">
                            </el-rate>
                        </td>
                        <!--性别-->
                        <td v-if="row.usex=='1'">男</td>
                        <td v-if="row.usex=='0'">女</td>

                        <td>{{row.utelephone}}</td>

                        <td>{{row.uhome}}</td>
                        </tr>
                    </template>
                </tbody>
            </table>


            <nav style="float:right;">
                <ul class="pagination pagination-lg">
                    <template v-for="page in Math.ceil(userInfo.length/pagesize)">
                        <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
                        <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                        <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                        <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(userInfo.length/pagesize)"><a href="#">下一页</a></li>
                    </template>
                </ul>
            </nav>


        </div>
    </div>
</template>

<script>
import Qs from 'qs'
export default {
    inject:['reload'],
    data() {
        return {
            userInfo: [],
            rowtemplate: { 'uname': 0, 'uid': '', 'age': '', 'creditLevel':0,'usex':'', 'utelephone':'-1','uhome':'','uhomt':''},
            pagesize: 5,
            curpage:1,//当前页的页码
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],//评分颜色
        }
    },
    mounted: function(){
        this.queryUserInfoList();
    },
    methods: {
        queryUserInfoList:function(){//获取所有的柜员信息
            this.$axios
            .post('/bk-user/queryUserInfoList',
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                for(var i=0;i<result.data.data.length;i++){
                    this.userInfo.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
        },
        //上一页方法
        PrePage: function (event) {
            $(".pagination .active").prev().trigger("click");
        },
        //下一页方法
        NextPage: function (event) {
            $(".pagination .active").next().trigger("click");
        },
        //点击页码的方法
        NumPage: function (num, event) {
            if (this.curpage == num) {
                return;
            }
            this.curpage = num;
            $(".pagination li").removeClass("active");
            if (event.target.tagName.toUpperCase() == "LI") {
                $(event.target).addClass("active");
            }
            else {
                $(event.target).parent().addClass("active");
            }
            if (this.curpage == 1) {
                $("#prepage").addClass("disabled");
            }
            else {
                $("#prepage").removeClass("disabled");
            }
            if (this.curpage == Math.ceil(this.userInfo.length / this.pagesize)) {
                $("#nextpage").addClass("disabled");
            }
            else {
                $("#nextpage").removeClass("disabled");
            }
        }
    }
}
</script>
<style>
    table thead tr th {
        text-align:center;
    }
    td{
        line-height: 38px !important;
    }
</style>
